<template>
  <div class="layoutCon">
    <div class="totals">
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='newCount' :duration='3000' separator=','></countTo>
        <label>신규 일자리</label>
      </div>
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='count' :duration='3000' separator=','></countTo>
        <label>누적 일자리</label>
      </div>
    </div>
    <search-box type="jobIndex"></search-box>
    <div class="jobList">
      <h2>주요공고</h2>
      <div class="loadList" v-loading="loading">
        <ul>
            <li v-for="(item,index) in main_list" :key="index">
              <div class="pic">
                <img src="@images/ico_job.png" alt="">
              </div>
              <div class="info">
                <label>{{item.companyName||item.user.company}}</label>
                <strong @click="showInfo(item.id,index,1)">{{item.title}}</strong>
                <p class="t">
                  <template v-if="item.jobs[0]">
                    {{item.jobs[0].job1&&item.jobs[0].job1.name}}/{{item.jobs[0].job2&&item.jobs[0].job2.name}}
                  </template>
                </p>
                <p>
                  <template v-if="item.areas[0]">
                  {{item.areas[0].area1&&item.areas[0].area1.name}} <em v-if="item.areas[0].area2">></em> {{item.areas[0].area2&&item.areas[0].area2.name}}  |
                  </template>
                  {{item.deadline}} 마감
                </p>
                <p class="v"><em>{{item.source&&item.source!=0?item.source:'워크위즈'}}</em>에서 <em>{{curToThousands(item.readCount||0)}}</em> 번 조회</p>
              </div>
              <div class="bom">
                <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id,index,1)">자세히보기</a>
                <el-popconfirm
                  v-if="item.collect"
                  title="찜한공고에서 제거하시겠습니까?"
                  confirmButtonText='확인'
                  cancelButtonText='취소'
                  iconColor="red"
                  @onConfirm="collect(item,index,1) "
                >
                  <a slot="reference" href="javascript:;" target="_self" class="btn ico_favo collect">찜하기</a>
                </el-popconfirm>
                <a v-else href="javascript:;" target="_self" class="btn ico_favo" @click="collect(item,index,1)">찜하기</a>
              </div>
            </li>
        </ul>
      </div>
    </div>
    <div class="jobList">
      <h2>최근공고</h2>
      <div class="loadList" v-loading="loading">
        <ul>
          <li v-for="(item,index) in new_list" :key="index">
            <div class="pic">
              <img src="@images/ico_job.png" alt="">
            </div>
            <div class="info">
              <label>{{item.companyName||item.user.company}}</label>
              <strong @click="showInfo(item.id,index,2)">{{item.title}}</strong>
              <p class="t">
                <template v-if="item.jobs[0]">
                  {{item.jobs[0].job1&&item.jobs[0].job1.name}}/{{item.jobs[0].job2&&item.jobs[0].job2.name}}
                </template>
              </p>
              <p>
                <template v-if="item.areas[0]">
                {{item.areas[0].area1&&item.areas[0].area1.name}} <em v-if="item.areas[0].area2">></em> {{item.areas[0].area2&&item.areas[0].area2.name}}  |
                </template>
                {{item.deadline}} 마감
              </p>
              <p class="v"><em>{{item.source&&item.source!=0?item.source:'워크위즈'}}</em>에서 <em>{{curToThousands(item.readCount||0)}}</em> 번 조회</p>
            </div>
            <div class="bom">
              <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id,index,2)">자세히보기</a>
              <el-popconfirm
                v-if="item.collect"
                title="찜한공고에서 제거하시겠습니까?"
                confirmButtonText='확인'
                cancelButtonText='취소'
                iconColor="red"
                @onConfirm="collect(item,index,2) "
              >
                <a slot="reference" target="_self" href="javascript:;" class="btn ico_favo collect">찜하기</a>
              </el-popconfirm>
              <a v-else href="javascript:;" target="_self" class="btn ico_favo" @click="collect(item,index,2)">찜하기</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <resume-card :cardParams="cardData" @changeCollect="changeCollect"></resume-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"
import { getJobIndex, jobOption, myJobCollect} from '@/api';
import { toThousands } from '@/utils'
import countTo from 'vue-count-to'
import searchBox from '@/components/searchBox'
import resumeCard from '@/components/resumeCard'

export default {
  name:'',
  components:{countTo,searchBox,resumeCard},
  props:[],
  data(){
    return {
      loading:true,
      newCount:0,
      count:0,
      main_list:[],
      new_list:[],
      cardData:null,
      curIndex:null,
      curType:null,
    }
  },
  computed:{
    ...mapState(['errorAvatar2','defaultAvatar']),
  },
  created(){
    this.getCVList();
  },
  mounted(){},
  methods:{
    async getCVList(){
      let res = await getJobIndex();
      if(res.code==200){
        this.newCount=res.data.newCount;
        this.count=res.data.count;
        this.main_list=this.randomList(res.data.main_list);
        this.new_list=res.data.new_list;
        this.loading=false;
      }
    },
    randomList: function(rand){
      return rand.sort(function(){return 0.5 - Math.random()});
    },
    showInfo(id,index,type){
      this.curIndex=index;
      this.curType=type;
      this.cardData={
        isShow:true,
        id:id
      }
    },
    changeCollect(status){
      if(this.curType==1){
        this.main_list[this.curIndex].collect=status;
      }else{
        this.new_list[this.curIndex].collect=status;
      }
    },
    async collect(obj,index,type){
      let _status=1;
          obj.collect&&(_status=0)
      let res = await myJobCollect({integrated_id:obj.id,status:_status});
      try {
        if(res.code==200){
          if(type==1){
            this.main_list[index].collect=_status;
          }else{
            this.new_list[index].collect=_status;
          }
        }
      } catch (error) {}
    },
    curToThousands(num){
      return toThousands(num)
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/job.scss";
</style>
